<template>
  <div id="table_container">
    <el-card style="margin-bottom: 5px; text-align: left">
      <el-input v-model="keyWord" placeholder="输入搜索内容" style="width: 200px;" @keyup.enter.native="handleFilter"></el-input>
      <el-select v-model="status" placeholder="状态" style="width: 90px;margin-left: 10px;">
        <el-option v-for="item in importanceOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter()" style="margin-left: 10px;">
        查询
      </el-button>
      <el-button v-permission="['dept:add']" class="create_btn" style="float: right;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
    </el-card>
    <el-tabs type="border-card" @tab-click="handleChange" style="border-radius: 5px">
      <el-tab-pane label="所有部门">
        <el-table
            :data="tableData"
            v-loading="loading"
            row-key="id"
            border>
          <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="name"
              label="部门名称">
          </el-table-column>
          <el-table-column
              prop="key"
              align="center"
              width="100"
              label="部门编码">
          </el-table-column>
          <el-table-column
              prop="dept_type"
              align="center"
              width="100"
              label="部门类别">
            <template slot-scope="scope">
              <el-tag
                  :style="{display: scope.row.dept_type !=null ? 'inline-block':'none'}"
                  :type="scope.row.dept_type === 0 ? 'success'
                  :scope.row.dept_type === 1 ? 'primary'
                  :scope.row.dept_type === 2 ? 'warning'
                  :scope.row.dept_type === 3 ? 'danger' :'info' "
                  disable-transitions>{{ scope.row.dept_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="owner"
              align="center"
              label="负责人">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系电话"
              align="center"
              width="110">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱">
          </el-table-column>
          <el-table-column
              prop="sort"
              label="排序"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="70">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.status === true ? 'success' :'danger' "
                  disable-transitions>{{ scope.row.status_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              width="180"
              align="center"
              label="操作">
            <template slot-scope="scope">
              <!--              <el-button @click="handleClick(scope.row)" title="查看详情" icon="el-icon-search" circle></el-button>-->
              <el-button  v-permission="['dept:edit']" @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="small">编辑</el-button>
              <el-button v-permission="['dept:delete']" @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="学校">
        <el-table
            :data="tableData"
            v-loading="loading"
            row-key="id"
            border>
          <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="name"
              label="部门名称">
          </el-table-column>
          <el-table-column
              prop="key"
              align="center"
              width="100"
              label="部门编码">
          </el-table-column>
          <el-table-column
              prop="dept_type"
              align="center"
              width="100"
              label="部门类别">
            <template slot-scope="scope">
              <el-tag
                  :style="{display: scope.row.dept_type !=null ? 'inline-block':'none'}"
                  :type="scope.row.dept_type === 0 ? 'success'
                  :scope.row.dept_type === 1 ? 'primary'
                  :scope.row.dept_type === 2 ? 'warning'
                  :scope.row.dept_type === 3 ? 'danger' :'info' "
                  disable-transitions>{{ scope.row.dept_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="owner"
              align="center"
              label="负责人">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系电话"
              align="center"
              width="110">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱">
          </el-table-column>
          <el-table-column
              prop="sort"
              label="排序"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="70">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.status === true ? 'success' :'danger' "
                  disable-transitions>{{ scope.row.status_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              width="180"
              align="center"
              label="操作">
            <template slot-scope="scope">
              <!--              <el-button @click="handleClick(scope.row)" title="查看详情" icon="el-icon-search" circle></el-button>-->
              <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="small">编辑</el-button>
              <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="医疗机构">
        <el-table
            :data="tableData"
            v-loading="loading"
            row-key="id"
            border>
          <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="name"
              label="部门名称">
          </el-table-column>
          <el-table-column
              prop="key"
              align="center"
              width="100"
              label="部门编码">
          </el-table-column>
          <el-table-column
              prop="dept_type"
              align="center"
              width="100"
              label="部门类别">
            <template slot-scope="scope">
              <el-tag
                  :style="{display: scope.row.dept_type !=null ? 'inline-block':'none'}"
                  :type="scope.row.dept_type === 0 ? 'success'
                  :scope.row.dept_type === 1 ? 'primary'
                  :scope.row.dept_type === 2 ? 'warning'
                  :scope.row.dept_type === 3 ? 'danger' :'info' "
                  disable-transitions>{{ scope.row.dept_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="owner"
              align="center"
              label="负责人">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系电话"
              align="center"
              width="110">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱">
          </el-table-column>
          <el-table-column
              prop="sort"
              label="排序"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="70">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.status === true ? 'success' :'danger' "
                  disable-transitions>{{ scope.row.status_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              width="180"
              align="center"
              label="操作">
            <template slot-scope="scope">
              <!--              <el-button @click="handleClick(scope.row)" title="查看详情" icon="el-icon-search" circle></el-button>-->
              <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" size="small">编辑</el-button>
              <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <el-tab-pane label="政府部门">
        <el-table
            :data="tableData"
            v-loading="loading"
            row-key="id"
            border>
          <el-table-column
              type="index"
              label="序号"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="name"
              label="部门名称">
          </el-table-column>
          <el-table-column
              prop="key"
              align="center"
              width="100"
              label="部门编码">
          </el-table-column>
          <el-table-column
              prop="dept_type"
              align="center"
              width="100"
              label="部门类别">
            <template slot-scope="scope">
              <el-tag
                  :style="{display: scope.row.dept_type !=null ? 'inline-block':'none'}"
                  :type="scope.row.dept_type === 0 ? 'success'
                  :scope.row.dept_type === 1 ? 'primary'
                  :scope.row.dept_type === 2 ? 'warning'
                  :scope.row.dept_type === 3 ? 'danger' :'info' "
                  disable-transitions>{{ scope.row.dept_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="owner"
              align="center"
              label="负责人">
          </el-table-column>
          <el-table-column
              prop="phone"
              label="联系电话"
              align="center"
              width="110">
          </el-table-column>
          <el-table-column
              prop="email"
              label="邮箱">
          </el-table-column>
          <el-table-column
              prop="sort"
              label="排序"
              align="center"
              width="50">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              align="center"
              width="70">
            <template slot-scope="scope">
              <el-tag
                  :type="scope.row.status === true ? 'success' :'danger' "
                  disable-transitions>{{ scope.row.status_label }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              width="180"
              align="center"
              label="操作">
            <template slot-scope="scope">
              <!--              <el-button @click="handleClick(scope.row)" title="查看详情" icon="el-icon-search" circle></el-button>-->
              <el-button v-permission="['dept:edit']" @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit">编辑</el-button>
              <el-button v-permission="['dept:delete']" @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="新建" width="35%" @close="handleClose" :visible.sync="createDialogFormVisible">
      <el-form :model="form" label-width="80px" style="text-align: left;">
        <el-form-item label="部门名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门类型">
          <el-select v-model="form.dept_type" clearable placeholder="请选择" style="width: 100%">
            <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.lable"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门编码">
          <el-input v-model="form.key" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="负责人">
          <el-input v-model="form.owner" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="地址">
          <el-cascader
              ref="address"
              :value="areaIdList"
              separator="-"
              :props="addressProps"
              @change="handleChangeArea"
              style="width: 100%">
          </el-cascader>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-input v-model="form.place" class="custorm_input"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="form.sort"></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8}"
              placeholder="请输入内容"
              v-model="form.description">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCreate">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" width="35%" @close="handleClose" :visible.sync="editDialogFormVisible">
      <el-form :model="form" label-width="80px" style="text-align: left;">
        <el-form-item label="部门名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门类型">
          <el-select v-model="form.dept_type" clearable placeholder="请选择" style="width: 100%">
            <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.lable"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门编码">
          <el-input v-model="form.key" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="负责人">
          <el-input v-model="form.owner" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="地址">
          <el-cascader
              ref="address"
              :value="areaIdList"
              separator="-"
              :props="addressProps"
              @change="handleChangeArea"
              style="width: 100%">
          </el-cascader>
        </el-form-item>

        <el-form-item label="详细地址">
          <el-input v-model="form.place" class="custorm_input"></el-input>
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="form.sort"></el-input-number>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 8}"
              placeholder="请输入内容"
              v-model="form.description">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createDept, deleteDept, getArea, getDept, getDeptOptions, updateDept} from "@/api";

export default {
  name: "index",
  data() {
    return {
      loading: true,
      tableData: [],
      createDialogFormVisible: false,
      showDialogFormVisible: true,
      editDialogFormVisible: false,
      form: {
        name: undefined,
        phone: undefined,
        owner: undefined,
        email: undefined,
        sort: 1,
        description: undefined,
        status: true,
        parent: undefined,
        dept_type: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        street: undefined,
        palce: undefined,
      },
      formLabelWidth: '80px',
      keyWord: undefined,
      importanceOptions: [{label: '启用', value: 1}, {label: '停用', value: 0}],
      status: undefined,

      nameOptions: [],
      typeOptions: [
        {value: 0, lable: '学校'},
        {value: 1, lable: '医疗机构'},
        {value: 2, lable: '政府部门'},
      ],

      // 地址级联框
      addressProps: {
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      //修改状态下地区id列表，用于回显
      areaIdList: [],

    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    loadDialogOptions() {
      getDeptOptions({isTop: true}).then(res => {
        this.nameOptions = res.data
      })
    },
    handleClick(row) {
      console.log(row);
    },
    getDataList(params) {
      getDept(params).then(res => {
        this.tableData = res.data
        setTimeout(() => {
          this.loading = false
        }, 1.5 * 500);
      })
    },
    handleChange(tab, event) {
      // console.log(tab, event);
      if (tab.label === '所有部门') {
        this.getDataList()
      } else if (tab.label === '学校') {
        this.getDataList({deptType: 0})
      } else if (tab.label === '医疗机构') {
        this.getDataList({deptType: 1})
      } else if (tab.label === '政府部门') {
        this.getDataList({deptType: 2})
      }
    },
    handleClose() {
      this.form = {
        name: undefined,
        phone: undefined,
        owner: undefined,
        email: undefined,
        sort: 1,
        description: undefined,
        status: true,
        parent: undefined,
        dept_type: undefined,
        province: undefined,
        city: undefined,
        district: undefined,
        street: undefined,
        palce: undefined,
      }
    },

    handleFilter() {
      this.getDataList()
    },
    handleCreate() {
      this.createDialogFormVisible = true
      this.loadDialogOptions()
    },
    handleDetail(row) {
      this.showDialogFormVisible = true
      this.loadDialogOptions()
      this.form = {...row}
    },
    handleEdit(row) {
      this.editDialogFormVisible = true
      this.loadDialogOptions()
      this.form = {...row}
      this.areaIdList = [row.province, row.city, row.district, row.street]
    },
    handleDelete(row) {
      deleteDept(row.id).then(res => {
        this.$message.success('删除成功！');
        this.$router.go(0)
      })

    },
    submitCreate() {
      let data = this.form
      createDept(data).then(res => {
        this.$message.success('新建成功！')
        this.createDialogFormVisible = false
        this.$router.go(0)
      })
    },
    submitUpdate() {
      let data = this.form
      updateDept(data).then(res => {
        this.$message.success('修改成功！')
        this.editDialogFormVisible = false
        this.$router.go(0)
      })
    },
    //获取地址信息
    lazyLoad(node, resolve) {
      const {level} = node;
      let params
      if (node.level !== 0) {
        params = {
          parentId: node.value
        }
      }
      if (node.level <= 4) {
        getArea(params).then((res) => {
          const nodes = res.data.map(item => ({
            ...item,
            label: item.name,
            value: item.id,
            leaf: level >= 3
          }))
          resolve(nodes);
        });
      }
    },
    //地区选择框选中后将对应的地区id赋值给表单
    handleChangeArea(value) {
      this.form.province = value[0]
      this.form.city = value[1]
      this.form.district = value[2]
      this.form.street = value[3]
    },

  },
}
</script>

<style scoped>


</style>